マウスに合わせて画像が重なる順序を変化させる
今回は、前回紹介した「画像を重ねて表示する」を応用し、マウスがある位置の画像を一番上に表示させるテクニックを紹介します。また、バナー広告が自動表示される『iswebライト』でレイヤーを絶対位置で指定する方法も紹介します。

→ 全ての画像をブロック化し、レイヤーにする
 
今回は「position:absolute」を指定し、画像の位置を絶対位置で指定します。ただし、バナー広告が自動挿入される『iswebライト』では、ページ上部にバナー広告が挿入される分だけ絶対位置が移動してしまいます。そこで、以下のような手順で絶対位置を指定します。
  1. 全ての画像を「DIV」タグでブロック化し、相対位置を指定する「position:relative」でレイヤー化します。なお、レイヤーは本来表示されるべき位置（top:0px、left:0px）に配置します。
  2. 手順 1. で作成したレイヤー内に画像を子レイヤーとして絶対位置「position:absolute」で配置します。
<DIV style="position:relative; top:0px; left:0px">

<IMG src="photo1.jpg">

<IMG src="photo2.jpg">

<IMG src="photo3.jpg">

<IMG src="photo4.jpg">

<IMG src="photo5.jpg">

</DIV>


→ 各画像を子レイヤーとして配置する
 
続いては、「IMG」タグに「position:absolute」のスタイルを指定し、各画像を子レイヤー化します。「position:absolute」は絶対位置で要素をレイヤー化するスタイルシートですが、レイヤー内に子レイヤーとして配置する場合は、親レイヤーの位置を基準として絶対位置を指定できます。つまり、親レイヤーがある位置の座標が（0,0）となるわけです。今回は、以下のように「top」「left」を指定し、ランダムに画像を配置してみました。さらに、「z-index」を指定して画像が重なる順序も指定しておきます。なお、「IMG」タグを子レイヤー化したあとは、「DIV」タグに「height」のスタイルシートを追加し、「DIV」タグの高さを固定しておく必要があります。
<DIV style="position:relative; top:0px; left:0px; height:320px">

<IMG src="photo1.jpg"
     style="position:absolute; top:0px; left:0px; z-index:1">

<IMG src="photo2.jpg"
     style="position:absolute; top:20px; left:250px; z-index:5">

<IMG src="photo3.jpg"
     style="position:absolute; top:100px; left:140px; z-index:3">

<IMG src="photo4.jpg"
     style="position:absolute; top:140px; left:20px; z-index:2">

<IMG src="photo5.jpg"
     style="position:absolute; top:150px; left:320px; z-index:4">

</DIV>


→ onMouseOver、onMouseOuイベントで「z-index」の値を変更する
 
最後に、各「IMG」タグにonMouseOver、onMouseOuイベントを追加し、マウスの位置に応じて「z-index」の値を変更させれば完成です。今回の例では「z-index」に1〜5の値を使用しているので、画像上にマウスが来たとき（onMouseOver）に「z-index」の値を6に変更してやれば、その画像を一番上に配置できます。逆に、マウスカーソルが画像の外に出たとき（onMouseOut）は、「z-index」を元の値に戻します。なお、JavaScriptでは、「z-index」を「zIndex」で指定します。
<DIV style="position:relative; top:0px; left:0px ; height:320px">

<IMG src="photo1.jpg"
     style="position:absolute; top:0px; left:0px; z-index:1"
     onMouseOver="this.style.zIndex=6"
     onMouseOut="this.style.zIndex=1">

<IMG src="photo2.jpg"
     style="position:absolute; top:20px; left:250px; z-index:5"
     onMouseOver="this.style.zIndex=6"
     onMouseOut="this.style.zIndex=4">

<IMG src="photo3.jpg"
     style="position:absolute; top:100px; left:140px; z-index:3"
     onMouseOver="this.style.zIndex=6"
     onMouseOut="this.style.zIndex=3">

<IMG src="photo4.jpg"
     style="position:absolute; top:140px; left:20px; z-index:2"
     onMouseOver="this.style.zIndex=6"
     onMouseOut="this.style.zIndex=2">

<IMG src="photo5.jpg"
     style="position:absolute; top:150px; left:320px; z-index:4"
     onMouseOver="this.style.zIndex=6"
     onMouseOut="this.style.zIndex=5">

</DIV>


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��